<template>
  <div class="container">
      <button class="btn btn-success" @click="changeSex">修改年龄</button>
      <hr>
      <button class="btn btn-primary" @click="setSexAsync">异步修改性别</button>
      <button class="btn btn-primary" @click="setSexAsync22">异步修改性别(不使用辅助函数)</button>
      <hr>
      <button class="btn btn-success" @click="setSex">修改性别</button>
      <hr>
      <button class="btn btn-success" @click="switchSex">修改性别</button>
      <hr>
      <button class="btn btn-warning" @click="$store.state.sex=1">修改性别(不建议使用)</button>
      <h1>使用vuex的辅助函数mapGetters :</h1>
      <h2>性别:{{getSex}}</h2>
      <h2>姓名:{{getUserName}}</h2>
      <h2>年龄:{{getAge}}</h2>
      <hr>
      <h1>使用vuex 的getters 来获取:</h1>
      <h2>性别:{{$store.getters.getSex}}</h2>
      <h2>性别:{{getUserSex2}}</h2>
      <h2>年龄:{{getAge1}}</h2>
      <h2>用户名:{{getUserName2}}</h2>
      <hr>
      <h1>改装过后的性别:{{ getUserSex }}</h1>
      <h1>改装过后的性别:{{ getUserSex }}</h1>
      <h1>改装过后的性别:{{ getUserSex }}</h1>
      <hr>
      <h1>性别是: {{$store.state.sex?'男':'女'}}</h1>
      <h1>性别是: {{$store.state.sex?'男':'女'}}</h1>
      <h1>性别是: {{$store.state.sex?'男':'女'}}</h1>
      <hr>
      <h1>稍微改装下: {{ getUserName1 }}</h1>
      <hr>
       <h1 class="title">这是音乐!!!! --> {{$store.state.username}} </h1>
  </div>
</template>

<script>
// 导入vuex中 为了获取getters的辅助函数 (mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性)
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  created () {
    console.log(this)
  },
  computed: {
    ...mapGetters([ // 将映射的getters中的函数映射到当前组件的计算属性中 , 并且展开
      'getAge',
      'getUserName',
      'getSex'
    ]),
    getAge1 () {
      return this.$store.getters.getAge
    },
    getUserName2 () {
      return this.$store.getters.getUserName
    },
    getUserSex2 () { // 通过vuex 中的getters 来获取数据
      return this.$store.getters.getSex
    },
    getUserName1 () { // 直接获取state的数据
      return this.$store.state.username
    },
    getUserSex () {
      return this.$store.state.sex ? '男' : '女'
    }
  },
  methods: {
    ...mapActions([ // 将store中的actions方法映射到当前组件的methods
      'setSexAsync',
      'setAgeAsync'
    ]),
    ...mapMutations([// 将store中mutations的方法 映射到当前组件的methods中 ,映射完成之后就可以像组件方法一样去调用
      'setSex'
    ]),
    switchSex () {
      // 通过commit() 来触发store中的mutations来修改数据
      this.$store.commit('setSex')
    },
    setSexAsync22 () {
      // 提交actions 异步修改性别
      this.$store.dispatch('setSexAsync')
    },
    changeSex () {
      // 提交修改年龄
      this.setAgeAsync(30).then(() => {
        // 实现一些修改完成后的业务
        alert('修改年龄成功!!!')
      })
    }
  }
}
</script>

<style>

</style>
